<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :model="patientQueryParams" ref="patientQueryForm" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="身份证号" prop="patientCard">
            <el-input
              v-model="patientQueryParams.patientCard" clearable placeholder="请输入身份证号" size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="loadPatientByCode">加载身份证号</el-button>
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" @click="addDoctorPatient">保存患者信息</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form :model="patientForm" ref="patientForm" :rules="rules" v-show="showSearch" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="身份证号" prop="patientCard">
                <el-input v-model="patientForm.patientCard" size="small" clearable placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="患者姓名" prop="patientName">
                <el-input v-model="patientForm.patientName" size="small" placeholder="请输入患者姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="患者电话" prop="patientPhone">
                <el-input v-model="patientForm.patientPhone" size="small" placeholder="请输入患者电话" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别" prop="patientSex">
                <el-radio-group v-model="patientForm.patientSex">
                  <el-radio
                    v-for="dict in sexOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                  >{{dict.dictLabel}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="出生日期" prop="patientBirth">
                <el-date-picker
                  v-model="patientForm.patientBirth"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="患者年龄" prop="patientAge">
                <el-input v-model="patientForm.patientAge" size="small" placeholder="请输入患者年龄" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址信息" prop="patientAddress">
                <el-input v-model="patientForm.patientAddress" size="small" placeholder="请输入地址信息" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-bottom: 15px">
      <el-col :span="16">
        <el-radio-group v-model="patientForm.registraFeeId">
          <el-radio-button
            v-for="type in dict.type.wp_regis_type"
            :key="type.value"
            :label="type.label"
            :vaule="type.value"
            @click.native="queryFee(type.value)"
          ></el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="3">
        <span style="margin-right: 10px">挂号费：￥ {{price}}</span>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" icon="el-icon-search" size="mini">挂号收费</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form :model="doctorRegisterForm" ref="doctorRegisterForm" :rules="registerRules" :inline="true" v-show="showSearch" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="所属科室" prop="registerDeptName">
                <el-input v-model="doctorRegisterForm.registerDeptName" readonly placeholder="选择科室" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="挂号时段" prop="registerTime">
                <el-select v-model="doctorRegisterForm.registerTime" placeholder="挂号时段">
                  <el-option
                    v-for="item in visitRegisterOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="挂号时间" prop="registerDate">
                <el-date-picker
                  v-model="doctorRegisterForm.registerDate"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择挂号时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" size="mini" @click="submitRegisterForm">挂号</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table v-loading="loading" :data="doctorDeptList">
          <el-table-column label="科室ID" align="center" prop="deptId" />
          <el-table-column label="科室名称" align="center" prop="deptName" />
          <el-table-column label="当前挂号量" align="center" prop="deptNum" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="chooseDept(scope.row)"
                v-hasPermi="['visit:register:register']"
              >选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page-size="queryParams.pageSize"
          :page-sizes="[5, 10]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDeptList"
        />
      </el-col>
    </el-row>

  </div>
</template>

<script>
    import { listDept } from "@/api/system/dept"
    import { getPatientByCode, addPatient, getAllRegistraFee, addDoctorRegister,queryRegis } from "@/api/register/outpatient"

    export default {
        name: "VisitRegister",
        dicts:['wp_regis_type'],
        data() {
            return {
                price:null,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 患者加载身份证号表单参数
                patientQueryParams:{
                    patientCard: undefined,
                },
                // 科室表格数据
                doctorDeptList: [],
                // 挂号种类数据集合
                registraFeeList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 性别状态字典
                sexOptions: [],
                // 挂号时段数据字典
                visitRegisterOptions: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 5
                },
                // 表单
                form:{},
                // 科室查询表单参数
                deptQueryForm: {},
                // 患者表单参数
                patientForm: {},
                sfza: {},
                // 挂号表单参数
                doctorRegisterForm:{},
                registraUnitprice: 0, // 挂号价格
                registraFeeId: 0,  // 挂号类型
                patientId: 0, // 患者的ID
                registraId:null,
                // 患者表单校验
                rules: {
                    patientName: [
                        { required: true, message: "患者姓名不能为空", trigger: "blur" }
                    ],
                    patientCard: [
                        { required: true, message: "身份证号不能为空", trigger: "blur" }
                    ],
                    patientPhone: [
                        { required: true, message: "患者电话不能为空", trigger: "blur" }
                    ]
                },
                // 挂号表单校验
                registerRules: {
                    registerDeptName: [
                        { required: true, message: "必须选择挂号科室", trigger: "blur" }
                    ],
                    registerTime: [
                        { required: true, message: "必须选择挂号时段", trigger: "blur" }
                    ],
                    registerDate: [
                        { required: true, message: "必须选择挂号日期", trigger: "blur" }
                    ]
                }
            };
        },
        created() {
            console.log("到到到")
            this.getDeptList(); // 加载科室
            this.getRegistraFeeList(); // 加载挂号类型
            this.getDicts("sys_user_sex").then(response => {
                this.sexOptions = response.data;
            });
            this.getDicts("visit_register_time").then(response => {
                this.visitRegisterOptions = response.data;
            });

        },
        methods: {
            /** 挂号 */
            submitRegisterForm(){
                this.$refs["doctorRegisterForm"].validate(valid => {
                    if (valid) {
                        if(!this.patientForm.registraFeeId || this.patientForm.registraFeeId == 0){
                            // 未选择挂号类型
                            this.$modal.msgError("请选择挂号类型")
                            return;
                        }
                        if(!this.patientId || this.patientId == 0){
                            // 未保存患者信息
                            this.$modal.msgError("请保存患者信息")
                            return;
                        }
                        //生成挂号ID
                        let result = "CH";
                        //随机生成0-9的数字 生成8个
                        for (let i = 0; i < 13; i++) {
                            let random = Math.floor(Math.random() * 10)
                            result += random;
                        }
                        //挂号编号
                        this.doctorRegisterForm.registerNumber = result;
                        //挂号费关联信息
                        console.log("bbb"+this.registraId)
                        this.doctorRegisterForm.registerSystemRegistraFeeId = this.registraId
                        // 给表单JSON对象增加新的属性
                        this.doctorRegisterForm['registerPatientId'] = this.patientId;
                        // this.msgInfo(JSON.stringify(this.doctorRegisterForm))
                        addDoctorRegister(this.doctorRegisterForm).then(response => {
                            this.$modal.msgSuccess("挂号成功");
                            // 重置表单
                            this.resetDoctorRegisterForm()
                            this.resetPatientForm()
                        });

                    }
                });
            },
            /** 选择某挂号费用类型，修改挂号费用 */
            changeRegistraFee(label){
                this.registraFeeList.map(item => {
                    if(item.registraId == label){
                        this.registraUnitprice = item.registraUnitprice
                    }
                });
            },
            /** 查询所有的挂号费用类型 */
            getRegistraFeeList(){
                getAllRegistraFee().then(response => {
                    this.registraFeeList = response.data;
                });
            },
            /** 查询挂号费 */
            queryFee(registraId){
                this.registraId = registraId;
                queryRegis(registraId).then(res=>{
                    this.price=res
                })
                console.log("aaa"+this.registraId)
            },
            /** 根据身份证号，保存患者信息 */
            loadPatientByCode(){
                //alert(this.patientQueryParams.patientCard);
                var  sfza=this.patientQueryParams.patientCard;

                getPatientByCode({patientCard:sfza}).then(response => {
                    if(response.data){
                        // 有患者信息
                        this.patientForm = response.data;
                        // 患者主键赋值给挂号表单中的对应属性
                        this.patientId = response.data.patientId
                        this.$modal.msgSuccess("保存患者信息成功")
                    }else{
                        // 没有患者信息
                        this.patientForm = {}
                        // 把输入的身份证号赋值给下面表单
                        this.patientForm.patientCard=this.patientQueryParams.patientCard;
                        this.$modal.msgError("没有患者信息，请手工录入")
                    }
                });
            },
            /** 新增患者 */
            addDoctorPatient(){
                addPatient(this.patientForm).then(response => {
                    // 患者主键赋值给挂号表单中的对应属性
                    this.patientId = response.data.patientId
                    // 把新增的患者身份证号回填到加载输入框
                    this.patientQueryParams.patientCard = this.patientForm.patientCard;
                    this.$modal.msgSuccess("保存患者信息成功")
                })
            },
            /** 选择科室 */
            chooseDept(row){
                // 选择某科室。给表单doctorRegisterForm中的属性registerUserId科室主键，registerDeptName科室名称赋值。
                this.doctorRegisterForm = {
                    registerUserId : row.deptId,
                    registerDeptName : row.deptName
                };
            },
            /** 查询科室列表 */
            getDeptList() {
                this.loading = true;
                listDept(this.queryParams).then(response => {
                    this.doctorDeptList = response.data; // 设置查询的当前页面数据集合
                    console.log(this.doctorDeptList);
                    this.total = response.total; // 设置总计数据行数，实现分页
                    this.loading = false; // 关闭遮罩层。
                });
            },
            // 岗位状态字典翻译
            statusFormat(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            // 表单重置
            resetPatientForm() {
                this.patientForm = {
                    patientId: undefined,
                    patientName: undefined,
                    patientCard: undefined,
                    patientSex: undefined,
                    patientAge: undefined,
                    patientPhone: undefined,
                    patientBirth: undefined,
                    patientAddress: undefined,
                };
                this.resetForm("patientForm");
            },
            /** 重置挂号表单 */
            resetDoctorRegisterForm(){
                this.doctorRegisterForm = {
                    registerUserId: undefined, // 挂号科室主键
                    registerDeptName: undefined, // 挂号科室名词
                    registerTime: undefined, // 挂号时间， 上下午、晚上
                    registerDate: undefined, // 挂号日期
                    registerPatientId: undefined, // 患者外键
                    registerSystemRegistraFeeId: undefined, // 挂号种类主键
                }
                this.resetForm("doctorRegisterForm");
            },
            resetDeptQueryForm() {
                this.deptQueryForm = {
                    registerUserId: undefined,
                    registerDeptName: undefined,
                    registerTime: undefined,
                    registerDate: undefined,
                };
                this.resetForm("deptQueryForm");
            },
        }
    };
</script>
